前端入门篇（四十一）JS基础8动态修改网页内容(DOM操作)

2024-06-02 09:36| 来源: 网络整理| 查看: 265

基本概念：

1.DOM操作：JS动态修改网页内容 2.DOM树：将html文件转换为机器能看得懂的数据结构；包含document文档节点、标签节点、text文本节点、comment注释节点等； document里面包含相应的方法，一个html文件里有且只有一个；标签节点包含其属性，可用于修改页面样式；文本节点挂靠在标签节点下面；可以查看官网解释：链接 DOM树示例图：在这里插入图片描述

3.注意js时间线

查找标签节点

1.通过id查找

var div1 = document.getElementById('div1');//返回节点

2.通过标签名查找

var ps = document.getElementsByTagName('p');//返回数组

3.通过class查找

var txt = document.getElementsByClassName('txt');//返回数组区别： 1.访问方式：通过id查找时，只能通过document对象查找；在js中，id唯一，如果html出现两个相同的id，后者会被忽略；通过标签名或class查找时，可以在任意标签节点上使用； 2.返回数据的类型：通过id查找时，直接返回节点通过标签名或class查找时，即使结果只有一个，也是保存在数组中；可以通过方括号来访问数组内容(txt[0]标签节点)，也能使用length属性；另注：即使一个标签有多个class，也能通过document.getElementsByClassName()找到；

4.先按id找到div1，再用class找到.txt:

html文件：

DOCTYPE html> DOM操作 div1 p1 p2 div1

js文件：

var div1 = document.getElementById('div1'); var p_txt = div1.getElementsByClassName('txt');

由找到的已知节点或document节点向下层寻找，目的是找到某节点，如果已经用id找到了p2，就不能再从p2找txt，因为不是下层

查找结果只有一个：p#p1.txt.txt1

创建节点，添加到DOM树

html文件：

js文件：

//添加节点 var div1 = document.getElementById('div1');//获取节点 var p = document.createElement('p');//创建p标签 var ptxt = document.createTextNode('p1');//创建文本节点 p.appendChild(ptxt);//文本节点关联到标签节点 div1.appendChild(p);//添加标签节点至DOM树

结果：在这里插入图片描述

删除节点

先在html文件中添加一个div2：

DOCTYPE html> DOM操作 div2

js文件：

//删除节点 var div2 = document.getElementById('div2');//获取div2 //方法一：通过父节点div1删除子节点div2 div1.removeChild(div2); //方法二：通过树的关系，找到div2的父节点，再删除自己，不用直接查找父节点 div2.parentNode.removeChild(div2); 操作节点的属性、内容

1.对于html定义好的属性：

可以使用`对象.属性`来获取；如果需要修改class名，要用`对象.className`来修改，因为class也是js的关键字(类)； `对象.style.属性`可以针对css样式进行修改

html文件：

js文件：

var img1 = document.getElementById('img1'); img1.src = 'img.png' //修改图片 img1.style.width = '50px';//img1.style针对css样式进行修改

结果：换了张图片，并调整了宽度

2.对于自定义的属性： html文件：

js文件：

//获取属性 var div1 = document.getElementById('div1'); var dat = div1.getAttribute('dat');//获取自定义属性 //设置自定义属性 img1.setAttribute('dat','11'); //删除自定义属性 // img1.removeAttribute('dat');

在这里插入图片描述

3.修改标签内容 innerHtml()既修改文本，也能支持html格式 textContent()纯文本

html文件：

js文件：

//修改内容 var p1 = document.getElementById('p1'); //innerHTML p1.innerHTML = "this is innerHTML, this is a tag"; //标签中换成纯文本 p1.textContent = "this is innerHTML, this is a tag";

innerHtml：在这里插入图片描述

纯文本：在这里插入图片描述

【本文地址】

公司简介

联系我们